<template>
	<view>
		<an-nav-bar title="店铺详情"> </an-nav-bar>
		<view class="content">
			<view class="store">
				<view class="photo">
					<image class="image" :src="$common.binImage(storeInfo.mainImg)" mode="scaleToFill"></image>
				</view>
				<view class="info">
					<view class="name">{{storeInfo.storeName}}</view>
					<view class="time">{{storeInfo.serviceTime}}</view>
				</view>
				
				<view class="function">
					<view class="item" :class="{'active':activeId == 1}" @click="activeId = 1">首页</view>
					<view class="item" :class="{'active':activeId == 2}" @click="activeId = 2">技师</view>
					<view class="item" :class="{'active':activeId == 3}" @click="activeId = 3">全部项目</view>
					<view class="item" :class="{'active':activeId == 5}" @click="$common.goPage('/pages/s/comment/index?storeId='+storeId)">用户评价</view>
				</view>
			</view>
		</view>
		<view class="data">
			<view class="inner">
				<view class="home" v-if="activeId == 1">
					<view class="technician-home">
						<view class="head-home">
							<view class="text">推荐技师</view>
							<view class="more" @click="activeId = 2">查看全部</view>
						</view>
						<view class="main-home flex">
							<view class="item" v-for="(item,index) in technicianList" :key="index" v-if="index < 5"
								@click="gotoUrl('/pages/technicianDetail/technicianDetail?id=' + item.id)">
								<view class="img">
									<image :src="$common.binImage(item.headImg)" mode="aspectFill"></image>
								</view>
								<view class="name">{{item.nickName}}</view>
							</view>
						</view>
					</view>
					<view class="product">
						<view class="head-product" style="border: none;">
							<text>推荐项目</text>
						</view>
						<view class="main-product">
							<view class="item flex" v-for="(item,index) in serviceList" :key="index"
								@click="gotoUrl('/pages/projectDetails/projectDetails?id=' + item.id)">
								<view class="photo">
									<image class="img" :src="$common.binImage(item.projectImg)" mode="aspectFill"></image>
								</view>
								<view class="info">
									<view class="row flex">
										<view class="name">{{item.projectName}}</view>

									</view>
									<view class="row flex_sw">
										<view class="time">服务时长：{{item.serviceTime}}分钟</view>
										
									</view>
									<view class="row flex">
										<view class="price flex">
											<span class="span1">{{item.sellPrice}}</span>
											<span class="span2">元/次</span>
										</view>
										<view class="order">已售{{item.sellNum}}份</view>
									</view>
									<view class="row">
										<view class="body" style="height: 60rpx; line-height: 60rpx; overflow: hidden;">
											{{item.projectDesc}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="technician" v-if="activeId == 2">
					<view class="main">
						<view class="item flex" v-for="(item,idx) in technicianList" :key="index"
							@click="gotoUrl('/pages/technicianDetail/technicianDetail?id=' + item.id)">
							<view class="photo">
								<image :src="$common.binImage(item.headImg)" mode="aspectFill"> </image>
							</view>
							<view class="info">
								<view class="name flex_sw">
									<view class="t flex">
										<view class="uni-label-pointer">{{item.nickName}}</view>
										<span class="">{{item.jobTitle}}</span>
									</view>
									<view class="i">可预约</view>
								</view>
								<view class="row flex_sw">
									<view class="left flex">
										<i></i>
										<text>最近接单{{item.totalOrder||0}}单</text>
									</view>
									<!-- <view class="right flex">
										<i></i>
										<text>7.85km</text>
									</view> -->
								</view>
								<view class="lbl flex">
									<view class="">资质认证、实名认证、头像认证</view>
								</view>
								<view style="height: 88rpx; line-height: 44rpx; font-size:24rpx; overflow: hidden;">{{item.selfIntroduction}}</view>
							
							</view>
						</view>
					</view>
				</view>
				<view class="home" v-if="activeId == 3">
					<view class="product">
						<view class="main-product">
							<view class="item flex" v-for="(item,index) in serviceList" :key="index"
								@click="gotoUrl('/pages/projectDetails/projectDetails?id=' + item.id)">
								<view class="photo">
									<image class="img" :src="$common.binImage(item.projectImg)" mode="aspectFill"></image>
								</view>
								<view class="info">
									<view class="row flex">
										<view class="name">{{item.projectName}}</view>

									</view>
									<view class="row flex_sw">
										<view class="time">服务时长：{{item.serviceTime}}分钟</view>
										<!-- <view class="star flex">
											<i v-for="(item,index) in 5" :key="index"></i>
										</view> -->
									</view>
									<view class="row flex">
										<view class="price flex">
											<span class="span1">{{item.sellPrice}}</span>
											<span class="span2">元/次</span>
										</view>
										<view class="order">已售{{item.sellNum}}份</view>
									</view>
									<view class="row">
										<view class="body" style="height: 60rpx; line-height: 60rpx; overflow: hidden;">
											{{item.projectDesc}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	import projectList from "../../components/projectList.vue"
	export default {
		components: {
			projectList
		},
		data() {
			return {
				storeId:'',
				accountId:'',
				imgUrl: indexConfig.imgUrl,
				activeId: 1,
				serviceList: [],
				technicianList: [],
				storeInfo: {},
			};
		},
		onLoad(option) {
			this.storeId = option.id
			
			// 查询店铺详情
			this.$http.get('/app/store/storeInfo/getInfoByStoreId/' + this.storeId).then(res => {
				this.storeInfo = res.data
			})
			
			// 查询项目列表
			this.$http.get('/appNoAuth/store/serviceProject/list', {
				storeId: this.storeId
			}).then(res => {
				this.serviceList = res.rows
			})
			
			// 查询技师列表
			this.$http.get('/appNoAuth/store/massageTechnician/list', {
				storeId: this.storeId,
				accountType: 1
			}).then(res => {
				this.technicianList = res.rows
			})
			
		},
		onShow() {
			
		},
		methods: {
			gotoUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.data {
		float: left;
		width: 100%;
		position: relative;



		.comment {
			width: 750rpx;
			position: absolute;
			left: 0;
			top: 0;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 20rpx;
			overflow: hidden;

			.list {
				width: 100%;
				margin-bottom: 10rpx;
				overflow: hidden;

				.item {
					float: left;
					width: 100%;
					padding-top: 20rpx;
					background-color: #fff;
					margin-bottom: 10rpx;
					box-shadow: 0 0 20rpx 0 rgba(1, 1, 1, .1);

					.bottom {
						float: left;
						width: 100%;
						height: 30rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.one {
							float: left;
							width: auto;
							height: 30rpx;
							line-height: 30rpx;
							color: #666;
							font-size: 24rpx;
						}
					}

					.center {
						float: left;
						width: 100%;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
						border-bottom: 2rpx solid #eee;
						color: #666;
						font-size: 24rpx;

						text {
							width: 100%;
							line-height: 30rpx;
						}
					}

					.top {
						float: left;
						width: 100%;
						padding: 0 30rpx;
						box-sizing: border-box;

						.time {
							float: right;
							width: 250rpx;
							height: 100rpx;
							line-height: 100rpx;
							color: #999;
							font-size: 24rpx;
							text-align: right;
						}

						.member {
							float: left;
							width: 280rpx;
							height: 100rpx;
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.nickname {
								float: left;
								width: 280rpx;
								height: 48rpx;
								line-height: 48rpx;
								color: #333;
								font-size: 32rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.result {
								float: left;
								width: 280rpx;
								height: 36rpx;
								line-height: 36rpx;
								color: #999;
								font-size: 24rpx;
								position: relative;

								&::after {
									float: left;
									width: 20rpx;
									height: 36rpx;
									background: url(/static/icon_good_sml.png) no-repeat 50%;
									background-size: 20rpx 22rpx;
									position: absolute;
									top: 0;
									left: 30rpx;
									content: "";
								}
							}
						}

						.photo {
							float: left;
							width: 100rpx;
							height: 100rpx;

							.img {
								float: left;
								width: 100rpx;
								height: 100rpx;
								border-radius: 50rpx;
								box-shadow: 0 0 6rpx 0 hsla(0, 0%, 40%, .28);
							}
						}
					}

					.center {
						float: left;
						width: 100%;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
						border-bottom: 2rpx solid #eee;
						color: #666;
						font-size: 24rpx;
					}

					.bottom {
						float: left;
						width: 100%;
						height: 70rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
					}
				}
			}

			.line {
				width: 100%;
				height: 2rpx;
				background-color: #eee;
				position: relative;
				z-index: 20;
			}

			.tab {
				width: 100%;
				height: 80rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				overflow: hidden;
				position: relative;
				border-bottom: 1rpx solid #eee;

				.item {
					float: left;
					width: 25%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					overflow: hidden;
					background-color: #fff;
					position: relative;
					color: #666;
					font-size: 28rpx;
					font-weight: 400;
				}

				.actice {
					color: #aa8050;
				}
			}
		}

		.inner {
			width: 100%;
			padding: 0 20rpx 60rpx;
			box-sizing: border-box;
			background-color: #f8f8f8;
			position: relative;
			z-index: 20;
			min-height: calc(100vh - 340rpx);

			.order-list {
				width: 100%;
				padding-bottom: 30rpx;
				box-sizing: border-box;

				.list {
					width: 100%;
					height: 270rpx;
					margin-top: 30rpx;
					background-color: #fff;
					border-radius: 10rpx;
					box-shadow: 0 0 27px 0 rgba(187, 184, 184, .8);
					position: relative;
					overflow: hidden;

					.bottom {
						float: left;
						width: 100%;
						height: 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;

						.time {
							float: left;
							width: 480rpx;
							height: 100rpx;
							line-height: 100rpx;
							font-size: 20rpx;
							font-weight: 300;
							color: #999;
							text-align: center;
							text-overflow: ellipsis;
						}

						button {
							float: right;
							width: 180rpx;
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 30rpx;
							font-size: 30rpx;
							text-align: center;

							&::after {
								border: none;
							}
						}

						.btn {
							background: linear-gradient(90deg, #d7b075, #aa8050);
							color: #f8f8f8;
						}

						.btn1 {
							background: #ccc;
							color: #f8f8f8;
						}
					}

					.cut {
						float: left;
						width: 670rpx;
						height: 0;
						border-top: 2rpx dashed #eee;
						position: absolute;
						top: 170rpx;
						left: 10rpx;
						content: "";
						background-color: #fff;
						z-index: 99;
						box-sizing: border-box;
					}

					.top {
						float: left;
						width: 100%;
						height: 170rpx;
						position: relative;

						.left {
							float: left;
							width: 150rpx;
							height: 150rpx;
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							.offset {
								display: flex;

								.currency {
									position: relative;
									margin-right: 30rpx;
									font-size: 34rpx;

									&::after {
										position: absolute;
										top: 60%;
										-webkit-transform: translateY(-50%);
										transform: translateY(-50%);
										content: "¥";
										display: block;
										color: #aa8050;
										font-weight: 700;
									}
								}

								.money {
									color: #aa8050;
									font-size: 60rpx;
									font-weight: 700;
								}
							}
						}

						.right {
							float: right;
							width: 480rpx;
							height: 170rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							margin-right: 20rpx;

							.name {
								float: left;
								width: 480rpx;
								height: 60rpx;
								line-height: 60rpx;
								font-size: 14px;
								font-weight: 600;
								color: #333;
								text-overflow: ellipsis;
								text-align: left;
							}

							.price,
							.rule {
								float: left;
								width: 100%;
								line-height: 36rpx;
								font-size: 18rpx;
								font-weight: 300;
								color: #333;
								text-overflow: ellipsis;
								text-align: left;
							}
						}
					}

					&::before {
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						top: 160rpx;
						left: -10rpx;
						content: "";
						background-color: rgba(187, 184, 184, .5);
						border-radius: 10rpx;
						z-index: 99;
					}

					&::after {
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						top: 160rpx;
						right: -10rpx;
						content: "";
						background-color: rgba(187, 184, 184, .5);
						border-radius: 10rpx;
						z-index: 99;
					}
				}
			}

			.main {
				width: 100%;
				margin-bottom: 10rpx;
				box-sizing: border-box;
				background-color: #f8f8f8;
				overflow: hidden;
				padding-top: 20rpx;

				.item {
					float: left;
					width: 100%;
					padding: 20rpx 30rpx;
					box-sizing: border-box;
					background-color: #fff;
					margin-bottom: 10rpx;
					align-items: flex-start !important;

					.info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: 440rpx;
						height: 220rpx;
						padding-bottom: 24rpx;
						box-sizing: border-box;

						.body {
							.part {
								width: 100rpx;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								background: #f9f8f8;
								border-radius: 10rpx;
								color: #666;
								font-size: 22rpx;
								margin-right: 12rpx;
							}
						}

						.lbl {
							color: #666;
							font-size: 20rpx;

							&::before {
								content: "";
								display: block;
								width: 20rpx;
								height: 24rpx;
								background: url(/static/zizhi.png) no-repeat;
								background-size: 100% auto;
								margin-right: 4px;
							}
						}

						.row {
							.left {
								color: #666;
								width: 220rpx;
								height: 44rpx;
								padding: 10rpx 0 10rpx 8rpx;
								// background: url() no-repeat;
								background-size: 100% auto;
								box-sizing: border-box;
								font-size: 22rpx;

								i {
									display: block;
									width: 20rpx;
									height: 24rpx;
									margin-right: 10rpx;
									background: url(/static/icon-order.png) no-repeat;
									background-size: 100% auto;
								}
							}

							.right {
								font-size: 24rpx;

								i {
									display: block;
									width: 20rpx;
									height: 24rpx;
									margin-right: 10rpx;
									background: url(/static/weizhi.png) no-repeat;
									background-size: 100% auto;
									margin-right: 6rpx;
								}
							}
						}

						.name {
							.uni-label-pointer {
								color: #333;
								font-size: 28rpx;
								margin-right: 30rpx;
							}

							span {
								color: #e9560c;
								font-size: 24rpx;
							}

							.i {
								height: 40rpx;
								padding: 0 16rpx;
								line-height: 40rpx;
								text-align: center;
								color: #fff;
								font-size: 20rpx;
								background: linear-gradient(90deg, #d7b075, #aa8050);
								border-radius: 20rpx;
							}
						}

					}

					.photo {
						width: 220rpx;
						height: 220rpx;
						box-shadow: 0 0 6rpx 0 hsla(0, 0%, 40%, .28);
						border-radius: 30rpx;
						position: relative;
						margin-right: 30rpx;

						image {
							width: 220rpx;
							height: 220rpx;
							border-radius: 30rpx;
						}
					}
				}
			}

			.home {
				float: left;
				width: 100%;
				margin-bottom: 20rpx;

				.product {
					float: left;
					width: 100%;
					box-sizing: border-box;
					margin-top: 20rpx;
					border-radius: 5px;
					background-color: #f8f8f8;

					.main-product {
						width: 100%;
						margin-bottom: 10rpx;
						box-sizing: border-box;
						background-color: #f8f8f8;
						overflow: hidden;

						.item {
							float: left;
							width: 100%;
							padding: 20rpx 20rpx;
							box-sizing: border-box;
							background-color: #fff;
							margin-bottom: 10rpx;
							align-items: flex-start !important;

							.info {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								width: 440rpx;
								height: 220rpx;

								.row {
									position: relative;

									.body {
										margin-top: 6rpx;

										.part {
											width: 74rpx;
											height: 40rpx;
											line-height: 40rpx;
											color: #666;
											font-size: 22rpx;
											margin-right: 10rpx;
											background-color: #f9f8f8;
											border-radius: 10rpx;
											text-align: center;
										}
									}

									.price {
										color: #e02020;
										font-size: 11px;
										flex: 1;

										.span1 {
											font-size: 34rpx;
											font-weight: 700;
										}

										.span2 {
											font-weight: 400;
											padding-left: 10rpx;
										}
									}

									.time {
										font-size: 24rpx;
										color: #666;
									}

									.star {
										float: right;
										width: 150rpx;
										height: 30rpx;
										margin-left: 18rpx;
										overflow: hidden;

										i {
											float: left;
											width: 20%;
											height: 30rpx;
											background: url(/static/star.png) no-repeat 100% 0;
											background-size: 28rpx 26rpx;
										}
									}
								}

								.project_name {
									font-size: 28rpx;
									color: #444;
									font-weight: 700;
								}
							}

							.photo {
								float: left;
								width: 220rpx;
								height: 220rpx;
								box-shadow: 0 0 6rpx 0 hsla(0, 0%, 40%, .28);
								border-radius: 30rpx;
								position: relative;
								margin-right: 20rpx;

								.img {
									float: left;
									width: 220rpx;
									height: 220rpx;
									border-radius: 30rpx;
								}
							}
						}
					}

					.head-product {
						float: left;
						width: 100%;
						height: 68rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						background-color: #fff;

						text {
							float: left;
							width: 100%;
							height: 68rpx;
							line-height: 68rpx;
							box-sizing: border-box;
							overflow: hidden;
							position: relative;
							color: #000;
							font-size: 26rpx;
							border-bottom: 2rpx solid #eee;
						}
					}
				}

				.technician-home {
					float: left;
					width: 100%;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					background-color: #fff;
					border-radius: 10rpx;

					.head-home {
						float: left;
						width: 100%;
						height: 68rpx;

						.text {
							float: left;
							width: 50%;
							height: 68rpx;
							line-height: 68rpx;
							box-sizing: border-box;
							overflow: hidden;
							position: relative;
							color: #000;
							font-size: 26rpx;
						}

						.more {
							float: right;
							width: 50%;
							height: 68rpx;
							line-height: 68rpx;
							box-sizing: border-box;
							overflow: hidden;
							position: relative;
							color: #666;
							font-size: 26rpx;
							text-align: right;
							padding-right: 18rpx;
							background: url(/static/arrow_right_8x14.png) no-repeat 100%;
							background-size: 8rpx 14rpx;
						}
					}

					.main-home {
						width: 100%;

						.item {
							width: 126rpx;
							margin-left: 10rpx;
							padding: 0 !important;

							&:first-child {
								margin-left: 0;
							}

							.name {
								width: 126rpx;
								height: 68rpx;
								line-height: 68rpx;
								color: #666;
								font-size: 24rpx;
								text-align: center;
							}

							.img {
								width: 126rpx;
								height: 126rpx;

								image {
									width: 126rpx;
									height: 126rpx;
									border-radius: 10rpx;
									box-shadow: 0 2rpx 18rpx 0 rgba(131, 131, 130, .15);
								}
							}
						}


					}
				}
			}
		}
	}

	.store {
		float: left;
		width: 100%;
		height: 254rpx;
		background-color: #f0f0f0;
		overflow: hidden;
		position: relative;

		.function {
			float: left;
			width: 100%;
			height: 60rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: rgba(51, 51, 51, .7);
			border-radius: 20rpx 20rpx 0 0;

			.item {
				float: left;
				margin-left: 30rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #fff;
				font-size: 28rpx;
				position: relative;
			}

			.active {
				color: #aa8050;
			}
		}

		.impression {
			float: left;
			width: 136rpx;
			height: 60rpx;
			position: absolute;
			top: 66rpx;
			right: 0;
			background-color: #fff;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			overflow: hidden;
			padding-left: 24rpx;
			box-sizing: border-box;

			.like {
				float: left;
				width: 136rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-repeat: no-repeat;
				background-position: 0 center;
				background-size: 30rpx auto;
				color: #999;
				font-size: 26rpx;
				padding-left: 40rpx;
				box-sizing: border-box;
			}
			.like0 {
				background-image: url(/static/icon_like.png);
			}
			.like1 {
				background-image: url(/static/icon_like2.png);
			}
		}

		.info {
			float: left;
			width: 100%;
			padding-left: 40rpx;
			height: 254rpx;
			background-color: rgba(51, 51, 51, .66);
			position: absolute;
			top: 0;
			left: 0;
			box-sizing: border-box;

			.name {
				float: left;
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				background: url(/static/icon_store_name.png) no-repeat 0;
				background-size: 50rpx auto;
				color: #fff;
				font-size: 30rpx;
				margin-top: 40rpx;
				text-indent: 60rpx;
			}

			.time {
				float: left;
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				background: url(/static/icon_store_time.png) no-repeat 0;
				background-size: 50rpx auto;
				color: #fff;
				font-size: 30rpx;
				margin-top: 12rpx;
				text-indent: 60rpx;
			}
		}

		.photo {
			float: left;
			width: 100%;
			height: 254rpx;
			position: relative;
		}
	}
</style>
